<template>
	<view class="all">
		<view class="item" v-for="(item,index) in data.list">
			<view class="flex justify-between align-center">
				<view class="flex justify-between align-center">
					<view style="position: relative;">
						<image class="img" src="https://pili-vod.guanxikeji.com/shibangyundian/img/1717138688512.png"></image>
						<view class="quan" v-if="item.state == 0">
							
						</view>
					</view>
					<view class="name">
						{{item.title}}
					</view>
				</view>
				<view class="time">
					{{$clearTime(item.CreatedAt)}}
				</view>
			</view>
			<view class="content">
				{{item.explain}}
			</view>
			<view class="fg"></view>
			<view class="flex justify-between align-center" @click="$goURl('/pages/missage/misDetails/misDetails?id='+item.ID)">
				<view class="a">
					查看详情
				</view>
				<view >
					<uni-icons type="right" color="#999" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<uni-load-more v-if="data.list.length>0" :status="data.loadmore"></uni-load-more>
		<empty v-if="data.list.length==0"></empty>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const { appContext } = getCurrentInstance();
	const data = reactive({
		page: 0,
		pages: 1,
		size: 20,
		list: [],		//商品
	})
	onLoad((option)=>{
	})
	onShow(()=>{
		data.page=0
		data.pages=1
		data.list = []
		getData()
	})
	function getData(){
		if(data.page<data.pages){
			data.page++
			
			appContext.config.globalProperties.$request({
				url:`api/messageList/?page=${data.page}&size=${data.size}`,
				method:'get',
				data:{
					page:data.page,
					size:data.size
				},
				success:(res)=>{
					res.data.data.forEach(item=>{
						data.list.push(item)
					})
					console.log('list',data.list)
					data.pages = Math.ceil(res.data.total / data.size)
					if (data.pages) {
						if(data.page==data.pages){
							data.loadmore = "nomore"
						}else{
							data.loadmore = "loading"
						}
					}else{
						data.loadmore = "nomore"
					}
				}
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	.quan{
		width: 12rpx;
		height: 12rpx;
		background: #F20C24;
		position: absolute;
		top: 0;
		right: 20rpx;
		border-radius: 50%;
	}
	.a{
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
	}
	.b{
		width: 8rpx;
		height: 16rpx;
		border: 3rpx solid #999999;
	}
	.fg{
		border: 2rpx solid #F4F6FA;
		margin: 20rpx auto;
	}
	.content{
		font-size: 28rpx;
		color: #999999;
		margin: 20rpx 0;
	}
	.time{
		font-size: 24rpx;
		color: #999999;
	}
	.name{
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}
	.img{
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
	}
	.item{
		width: 654rpx;
		padding: 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.all{
		background-color: #F4F6FA;
		min-height: 100vh;
	}
	.flex{
			display: flex;
		}
		.justify-center{
			justify-content: center;
		}
		.justify-around{
			justify-content: space-around;
		}
		.justify-between{
			justify-content: space-between;
		}
		.justify-start{
			justify-content: flex-start;
		}
		.justify-end{
			justify-content: flex-end;
		}
		.align-center{
			align-items: center;
		}
		.flex-direction{
			flex-direction: column;
		}
</style>
